LESS nedir ?
Mustafa Candoğan Less Ruby de geliştirilmiş ve zamanla Javascripte aktarılmış bir css preprocessor (css önişlemcisi) dir.Less Ruby de geliştirilmiş ve zamanla Javascripte aktarılmış bir css preprocessor (css önişlemcisi) dir.
Less içinde fonksiyonları, değişkenleri, karıştırmaları(mixin), matematiksel hesapları barındıran ve css yazımında kod fazlalığının önüne geçen bir dinamik stil dosyasıdır. Stilleri tüm özellikleriyle destekleyen aynı zamanada içinde kendi kurallarını barındıran ve kullanıldığı projede büyük yazılım kolaylığı sağlayan ender dillerden biridir.
Kullanıcıya sunduğu birçok kolaylık mevcut ancak içlerinde en yararlı olan özelliği değişken tanımlama özelliğidir. Değişken tanımlayarak yazılan kodları daha basit ve hızlı yöntemde yazmanınızı sağlar. Ayrıca ileride birden çok alanın güncellenme gibi bir durum oluştuğunda ilgili değişkenin güncellenmesini rahatlıkla yapabilirsiniz.
Less birçok kullanıcıda merak uyandırmaktadır. Bu nedenle çok sayıda kullanıcı tarafından da ilgi görmektedir. Less dosyasının kullanımı ve kurulumu hızlı ve basittir. Yalnızca tarayıcı ve node.js üzerinde çalışabilmektedir ve Less.js ve Css olmak üzere iki farklı şekilde kullanılabilmektedir.
LESS aynı zaman da size tasarım şablonları hazırlamanızda da yardımcı oluyor. Örneğin çok sık tasarımlar yapan birisiniz ve her seferinde belirli kodları yazmaktan sıkıldınız kopyala yapıştır ile uğraşmadan bu işin içinden çıkmak istiyor ve bir kalıp hazırlamak istiyorsunuz. Bu konuda da less üzerinde ufak bir script hazırlayıp bu işleri halledebilirsiniz.
Peki nasıl çalışır bu less?
Kurulum ve Başlangıç Aşaması
LESS sadece tarayıcı veya node.js üzerinden çalışan bir JavaScript yazılımıdır. Kullanımında ise iki ayrı yöntem önerilmekte.
1. Yöntem : LESS dosyalarını CSS olarak derlemek
Projenizi LESS ile yazdıktan sonra canlıya geçme aşamasında tüm LESS dosyaları CSS’e çevrilebilir ve o haliyle yayınlanabilir. Böylece sadece development aşamasında değil site hızı tarafında da hız kazanılır. Online olarak LESS’den CSS’e kod çevirimi yapan birçok araç mevcut. En popülerlerinden biri de LESS2CSS.
2 .Yöntem : LESS.JS Kullanımı
Bu yöntem LESS’in kendi web sayfasında da tarif edilen, LESS dosyalarınızın altına ekleyeceğiniz bir JS dosyası sayesinde tüm stil tanımlanırız gerçek zamanlı olarak işlenir ve çalışır hale gelir. Kullanımı kolaydır. Ancak kimi zaman verimsiz olabilir. Çünkü sitenize giren kullanıcının tarayıcısı daha fazla işlem yapmak zorunda kalır.
Web sayfanıza aşağıdaki satırları eklemek yeterli. Burada önemli nokta stillerimizi içeren LESS dosyaları JS dosyasının üstüne olmak durumunda.
<link rel="stylesheet/less" href="style.less">
<script src="less.js"></script>
3. Yöntem : Mixins
Stil birleştirmeleri (Mixins) yapısı sayesinde daha önce başka bir element için tanımladığımız stil seçeneklerini bir başka element için de kullanılabilir kılıyoruz. Normal CSS yazarken bu işlem bir çok kodu kopyala yapıştır mantığında yapmamıza sebep olur ve satır sayısını fazlasıyla arttırırdı.
Örnek :
.deneme{
margin:8px;
padding:18px;
}
.test{
border-radius:100%;
text-align:left;
margin:8px;
padding:18px;
}
Örnekte de görüldüğü gibi padding ve margin tanımlarını .deneme‘yi kopyalamak durumunda kaldık. Ama LESS tarafında bu işi yapmak çok kolay.
.deneme{
margin:8px;
padding:18px;
}
.test{
border-radius:100%;
text-align:left;
.deneme
}
Less kullarak sadece .test‘i çağırmak, padding ve margin tanımlamalarını geçerli kılmak için yeterli olacaktır.
4. Yöntem : İç içe elemanlar
Less kullarak bir nesnenin iç içe elemanlı kullanımı çok çok kolay
ÖRNEK:
<ul>
<li>1. Öğe</li>
<li>2. Öğe</li>
<li>3. Öğe <a href="#">Detaylar</a></li>
</ul>
Bu elemandaki her bir tanımı stilize ederken aşağıdaki yolu izleyebiliyoruz.
ul{
margin:20px;
font-size:14px;
li{
padding:5px 8px;
color:green;
a{
color:blue;
}
}
}
Eğer bunu normal CSS ile yazacak olsaydık ya da bu LESS kodunu CSS’e convert edecek olsaydık karşılaşacağımız sonuç şu olacaktı :
ul{
margin:20px;
font-size:14px;
}
ul li{
padding:5px 8px;
color:green;
}
ul li a{
color:blue;
}
5. Yöntem : Dört İşlem
LESS kullanarak çarpma, bölme,toplama ve çıkarma işlemleri de yapabiliyoruz. Aşağıda bununla ilgili örnek verilmiştir.
ÖRNEK:
@genislik:380px;
div{
width:@genislik - 80;
}
Bu işlemi yaparak 300px genişliğinde bir div hazırlamış olduk.
6. Fonksiyonlar
LESS deki fonksiyon desteği onu daha çok programlama dili gibi göstermekte.
ÖRNEK:
@mavi : blue;
a{
color:@mavi;
&:hover{
color:desaturate(@mavi,50%);
}
}
Bu örnekte mavi renkteki bir link üzerine gelindiğinde daha koyu bir hal almakta. Bu kodun normal CSS’deki karşılığı ise şu şekilde :
a{
color:blue;
}
a:hover{
color:#24466c;
}
